<!-- 列表结构转树结构的最优算法 -->
<template>
  <div class='box'>123</div>
</template>

<script>
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {};
  },
  //监听属性 类似于data概念
  computed: {
    getName() {
      // return this.$store.state.name;
      return this.$store.getters.getMessage;
    },

    ...mapState(["name"]),
    ...mapGetters(["getMessage"]),
  },
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    // 注意，mapMutations是解构到methods里面的，而不是计算属性了
    // ...mapMutations(["setNumberIsWhat"]),
    ...mapMutations({ setNumberIsAlias: "setNumberIsWhat" }), // 赋别名的话，这里接收对象，而不是数组
    ...mapActions(["setNum"]),
    xxx() {
      let listToTree = [
        { id: 1, pid: null, name: "M1部门" },
        { id: 11, pid: 1, name: "张三" },
        { id: 12, pid: 1, name: "李四" },
        { id: 13, pid: 1, name: "王五" },
        { id: 2, pid: null, name: "M2部门" },
        { id: 21, pid: 2, name: "赵六" },
        { id: 22, pid: 2, name: "周七" },
        { id: 23, pid: 2, name: "吴八" },
      ];
      // console.log(sourceModel);
      // sourceModel.filter((item) => item.pid === null);
      // 根据 pid 和 id 的对应关系筛选出根结点,遍历根节点调用自身匹配子节点,容易造成堆栈的溢出；消耗大量的内存
      // const listToTree = (
      //   list,
      //   { idVal = null, id = "id", pid = "pid" } = {}
      // ) => {
      //   return list
      //     .filter((item) => item[pid] === idVal)
      //     .map((item) => ({
      //       ...item,
      //       children: listToTree(list, { idVal: item[id] }),
      //     }));
      // };

      // 2.通过 pid 从映射中取父节点,如果节点不存在则当前节点 item 为根节点,如果存在则把当前 item 节点添加到 parent 节点的 children 属性中
      // listToTree = (list, id = "id", pid = "pid") => {
      //   const hash = new Map(),
      //     roots = [];
      //   list.forEach((item) => {
      //     hash.set(item[id], item);
      //     const parent = hash.get(item[pid]);
      //     if (!parent) {
      //       roots.push(item);
      //     } else {
      //       !parent.children && (parent.children = []);
      //       parent.children.push(item);
      //     }
      //   });
      //   return roots;
      // };

      // 3.
      let items = [
        { id: 1, name: "部门1", pid: 0 },
        { id: 2, name: "部门2", pid: 1 },
        { id: 3, name: "部门3", pid: 1 },
        { id: 4, name: "部门4", pid: 3 },
        { id: 5, name: "部门5", pid: 4 },
      ];
      // 先把数据转成Map去存储，之后遍历的同时借助对象的引用，直接从Map找对应的数据做存储。不同点在遍历的时候即做Map存储,有找对应关系。性能会更好
      // 一次循环就搞定了，该实现的时间复杂度为O(n)，需要一个Map把数据存储起来，空间复杂度O(n)
      const itemMap = {};
      const result = []; //存放结果集
      for (let item of items) {
        let { id, pid } = item;
        if (!itemMap[id]) {
          itemMap[id] = {
            children: [],
          };
        }
        itemMap[id] = {
          ...item, //展开数组
          children: itemMap[id]["children"],
        };
        const treeItem = itemMap[id];
        console.log("treeItem", treeItem);
        if (pid === 0) {
          result.push(treeItem);
        } else {
          if (!itemMap[pid]) {
            itemMap[pid] = {
              children: [],
            };
          }
          itemMap[pid].children.push(treeItem);
        }
      }
      console.log("result", result);
      return result;
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  async mounted() {
    this.xxx();
    // console.log(this.getName);
    console.log(this.name, this.getMessage);

    console.log(
      "----------------------------Mutation----------------------------"
    );
    console.log(`旧值：${this.$store.state.number}`);
    this.$store.commit("setNumber");
    console.log(`新值：${this.$store.state.number}`);

    console.log(`带参旧值：${this.$store.state.number}`);
    // this.$store.commit("setNumberIsWhat", { number: 999 });
    // this.setNumberIsWhat({ number: 999 });
    this.setNumberIsAlias({ number: 999 }); //别名（赋别名的话，这里接收对象，而不是数组）
    console.log(`带参新值：${this.$store.state.number}`);

    console.log(
      "----------------------------Actions----------------------------"
    );
    console.log(`旧值：${this.$store.state.number}`);
    // await this.$store.dispatch("setNum");
    await this.$store.dispatch("setNum", { number: 611 });
    // await this.setNum({ number: 123 });
    console.log(`新值：${this.$store.state.number}`);
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
</style>